/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class='container' v-if="goodslist||goodslist.length>0">
	    <view class='disgoods-list' >
	        <view class="choice_item" v-for="(item,index) in goodslist" :key="index">
	            <view class='goods-check'><checkbox :checked='item.selected' color="#ff3b3b" @tap='selectGoods' :data-index="index" :data-id='item.goods_id'></checkbox></view>
	            <view class="img-wrap">
	                <image @tap='goodsDetail' :data-id='item.goods_id' :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"></image>
	            </view>
	            <view class="item-cont">
	                <view class="title" @tap='goodsDetail' :data-id='item.goods_id'>{{item.goods_name}}</view>
	                <view class="price">分成金额：{{filter(item.distribut)}}</view>
	                <view class="comment">￥{{filter(item.shop_price)}}</view>
	            </view>
	        </view>
	    </view>
	    <view class="no-data" v-if="!goodslist || goodslist.length == 0">
	        <image :src="imgUrl+'cart/cart-null.png'" class="cart-image"/>
	        <view class="no-data-title">没有相关的数据</view>
	    </view>
	    <view class='distri-bot'>
	        <view class='bot-left'>
	            <checkbox class='check-all' color="#ff3b3b" :checked='selectAll' @tap='checkAll'></checkbox>
	            <label>全选</label>
	        </view>
	        <view class='bot-right' @tap='delGoods'>
	            <button>删除</button>
	        </view>
	    </view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {delUerDistribution,getBeenAdd} from "@/api/api.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				goods: null,
				selectAll: false, //全选标志
				goodslist:"",
				goodsIds:[],//商品id
				total:"",//数据条数
				params:{
					// order_by:"addtime",
					
					size:10,
				}
			};
		},
		onLoad(){
			this.getBeenAdd(this.params)
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth']),
		},
		methods:{
			/*分销商品*/
			getBeenAdd(params){
				getBeenAdd(params).then(res=>{
					if(res){
						res.records.forEach((i,index)=>{
							i.selected=false
						})
						this.total=res.total;
						this.goodslist=res.records
						this.selectAll=false;
					}
					console.log(res)
				})
			},
			/*删除添加的分销商品*/ 
			delUerDistribution(params){
				delUerDistribution(params).then(res=>{
					if(res.msg==1){
						common.toast("none","删除成功",2000)
						let that=this;					
						setTimeout(function () {
						   that.getBeenAdd(that.params)
													
						}, 2000);
					}
					console.log(res)
				})
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
			/*单选*/ 
			selectGoods(e){
				let index=e.currentTarget.dataset.index;
				let goods_id=e.currentTarget.dataset.id;
				this.goodslist[index].selected=!this.goodslist[index].selected;
				/*检查是否有勾选,没有就添加否则删除*/
				if(this.goodsIds.indexOf(goods_id)==-1){
					this.goodsIds.push(goods_id)
					
				}else{
					this.goodsIds.splice(this.goodsIds.indexOf(goods_id), 1)
				
				}
				/*长度是否相等  相等就是全选*/
				this.detection()
				console.log(this.goodsIds)
			},
			/*全选*/ 
			checkAll(e){
				/*全选 查询数组有就添加*/
				if(!this.selectAll){
					this.selectAll=true;
					this.goodslist.forEach((i,index)=>{
						// console.log(i)
						i.selected=true;
						if(this.goodsIds.indexOf(JSON.stringify(i.goods_id))==-1){
							this.goodsIds.push(JSON.stringify(i.goods_id))
						}
					})
				}else{
					this.selectAll=false;
					this.goodslist.forEach((i,index)=>{
						// console.log(i)
						i.selected=false;
						
					})
					this.goodsIds.length=0;
				}
			},
			/*检测是否全选*/
			detection(){
				if(this.goodsIds.length==this.goodslist.length){
					// console.log("相等")
					this.selectAll=true;
					console.log(this.goodsIds.length,this.goodslist.length)
				}else{
					this.selectAll=false;
				}
			},
			/*删除方法*/ 
			delGoods(){
				this.delUerDistribution(this.goodsIds)
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.goodslist.length===this.total){
					common.toast("none","加载完了",2000)
					 return;
				}
				
				this.params.size+=10;
				
				this.getDistribution(this.params);
				
				
			},
		}
	}
</script>

<style lang="scss">
/*checkbox重写样式*/
page{
    background: #f5f5f5;
}
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
   width: 44rpx;
   height: 44rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx;
   color:#fff;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
/*主样式*/
.container{
     background-color: #fff;
}
.ico-dir{
    width: 16rpx;
    height: 22rpx;
    margin-left: 10rpx;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
}
.ico-dir-dn {
    background-position-x: -16rpx;
}
.ico-dir-up {
    background-position-x: -32rpx;
}
.disgoods-list{
    width: 100%;
    padding-bottom: 100rpx;
}
.choice_item{
    position: relative;
    width: 94%;
    min-height: 200rpx;
    padding: 10rpx 3%;
    border-bottom: 1px solid #f3f3f3;
    font-size: 28rpx;
}
.goods-check{
    float: left;
    margin-right: 10px;
    margin-top: 76rpx;
}
.img-wrap{
    float: left;
    width: 180rpx;
    height: 180rpx;
    padding:0 10rpx 10rpx;
    margin-right: 10px;
}
.img-wrap image{
    width: 100%;
    height: 100%;
}
.item-cont .title{
    height: 72rpx;
    margin: 12rpx 0;
    padding-right: 10rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;   
}
.price{
    display: inline-block;
    color: #999;
    padding-bottom: 20rpx;
}
.comment{
    color: #ff3b3b;
}
.distri-bot{
    width: 100%;
    height: 100rpx; 
    background-color: #ededed;
    position: fixed; 
    left: 0; 
    bottom: 0;
}
.bot-left{ 
    width: 80%; 
    float: left;
    line-height: 100rpx;
}
.bot-left .check-all{
    margin-left: 10px;
}
.bot-left label{
    vertical-align: middle;
}
.bot-right{ 
    width: 20%; 
    float: right;
}
.bot-right button{
    background-color: #ff3b3b;
    border: none; 
    line-height: 100rpx;
    color: #fff;
    font-size: 14px;
}

</style>
